{% extends 'base.html' %}
{% load crispy_forms_tags %}

{% block title %}{% if form.instance.pk %}Update{% else %}Create New{% endif %} Service{% endblock %}

{% block extra_css %}
<link href='https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.0.0/css/all.min.css' rel='stylesheet'>
<style>
    :root {
        --primary-color: #4361ee;
        --secondary-color: #3f37c9;
        --success-color: #4bb543;
        --danger-color: #ff3333;
        --light-color: #f8f9ff;
        --dark-color: #212529;
        --border-radius: 0.5rem;
        --box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05);
        --transition: all 0.3s ease;
    }

    .page-header {
        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
        padding: 2rem 0;
        margin-bottom: 2rem;
        color: white;
        border-radius: var(--border-radius);
        box-shadow: var(--box-shadow);
    }

    .page-title {
        font-weight: 700;
        margin: 0;
        font-size: 1.75rem;
    }

    .form-card {
        background: #fff;
        border-radius: var(--border-radius);
        box-shadow: var(--box-shadow);
        padding: 2rem;
        margin-bottom: 2rem;
        border: 1px solid rgba(0, 0, 0, 0.05);
        transition: var(--transition);
    }

    .form-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.08);
    }

    .form-title {
        color: var(--dark-color);
        font-weight: 700;
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid #eee;
        display: flex;
        align-items: center;
    }

    .form-title i {
        margin-right: 0.75rem;
        color: var(--primary-color);
    }

    .form-group {
        margin-bottom: 1.5rem;
    }

    .form-control, .form-select, .form-control:focus {
        border-radius: 0.375rem;
        padding: 0.6rem 1rem;
        font-size: 0.95rem;
        border: 1px solid #e0e0e0;
        transition: var(--transition);
    }

    .form-control:focus, .form-select:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 0.2rem rgba(67, 97, 238, 0.15);
    }

    .form-label {
        font-weight: 600;
        color: var(--dark-color);
        margin-bottom: 0.5rem;
        font-size: 0.95rem;
    }

    .form-text {
        font-size: 0.85rem;
        color: #6c757d;
    }

    .btn {
        font-weight: 500;
        padding: 0.65rem 1.5rem;
        border-radius: 0.375rem;
        transition: var(--transition);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .btn i {
        margin-right: 0.5rem;
    }

    .btn-primary {
        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
        border: none;
    }

    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(67, 97, 238, 0.3);
    }

    .btn-outline-secondary {
        border: 1px solid #dee2e6;
    }

    .btn-outline-secondary:hover {
        background-color: #f8f9fa;
        border-color: #dee2e6;
    }

    /* Custom checkbox styling */
    .form-check-input:checked {
        background-color: var(--primary-color);
        border-color: var(--primary-color);
    }

    /* Price input group */
    .input-group-text {
        background-color: #f8f9fa;
        border: 1px solid #e0e0e0;
        color: #6c757d;
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .form-card {
            padding: 1.5rem;
        }
        
        .btn {
            width: 100%;
            margin-bottom: 0.5rem;
        }
        
        .btn-group .btn {
            margin-right: 0.5rem;
            margin-bottom: 0;
        }
        
        .btn-group .btn:last-child {
            margin-right: 0;
        }
    }
</style>
{% endblock %}

{% block content %}
<!-- Page Header -->
<div class="page-header mb-4">
    <div class="container">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <h1 class="page-title">
                    <i class="fas {% if form.instance.pk %}fa-edit{% else %}fa-plus-circle{% endif %} me-2"></i>
                    {% if form.instance.pk %}Update Service{% else %}Create New Service{% endif %}
                </h1>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item"><a href="{% url 'home' %}" class="text-white">Home</a></li>
                        <li class="breadcrumb-item"><a href="{% url 'appointments:service-list' %}" class="text-white">Services</a></li>
                        <li class="breadcrumb-item active text-white-50" aria-current="page">
                            {% if form.instance.pk %}Update{% else %}New{% endif %}
                        </li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
</div>

<div class="container">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="form-card">
                <form method="post" novalidate {% if form.instance.pk %}action="{% url 'appointments:service-update' form.instance.pk %}"{% else %}action="{% url 'appointments:service-create' %}"{% endif %}>
                    {% csrf_token %}
                    
                    <h2 class="form-title">
                        <i class="fas fa-info-circle"></i>
                        Service Information
                    </h2>
                    
                    <div class="row g-3">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="form-label" for="{{ form.name.id_for_label }}">
                                    Service Name <span class="text-danger">*</span>
                                </label>
                                {{ form.name|as_crispy_field }}
                                <div class="form-text">Enter a descriptive name for the service.</div>
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label" for="{{ form.duration_minutes.id_for_label }}">
                                    {{ form.duration_minutes.label }} <span class="text-danger">*</span>
                                </label>
                                <div class="input-group">
                                    <input type="number" 
                                           name="{{ form.duration_minutes.name }}" 
                                           value="{{ form.duration_minutes.value|default:'' }}" 
                                           min="5" 
                                           step="1" 
                                           class="form-control" 
                                           id="{{ form.duration_minutes.id_for_label }}"
                                           required>
                                    <span class="input-group-text">minutes</span>
                                </div>
                                {% if form.duration_minutes.help_text %}
                                    <div class="form-text">{{ form.duration_minutes.help_text }}</div>
                                {% endif %}
                                {% if form.duration_minutes.errors %}
                                    <div class="invalid-feedback d-block">
                                        {{ form.duration_minutes.errors|join:", " }}
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label" for="{{ form.price.id_for_label }}">
                                    Price <span class="text-danger">*</span>
                                </label>
                                <div class="input-group">
                                    <span class="input-group-text">$</span>
                                    {{ form.price|as_crispy_field }}
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-12">
                            <div class="form-group">
                                <label class="form-label" for="{{ form.description.id_for_label }}">
                                    Description
                                </label>
                                {{ form.description|as_crispy_field }}
                                <div class="form-text">Provide details about what this service includes.</div>
                            </div>
                        </div>
                        
                        <div class="col-12">
                            <div class="form-check form-switch">
                                {{ form.is_active|as_crispy_field }}
                                <label class="form-check-label" for="{{ form.is_active.id_for_label }}">
                                    Active
                                </label>
                                <div class="form-text">Inactive services won't be available for booking.</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="d-flex justify-content-between align-items-center mt-5 pt-3 border-top">
                        <a href="{% if form.instance.pk %}{% url 'appointments:service-detail' form.instance.pk %}{% else %}{% url 'appointments:service-list' %}{% endif %}" 
                           class="btn btn-outline-secondary">
                            <i class="fas fa-arrow-left me-2"></i>Cancel
                        </a>
                        <div class="btn-group">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save me-2"></i>
                                {% if form.instance.pk %}Update Service{% else %}Create Service{% endif %}
                            </button>
                            {% if form.instance.pk %}
                            <a href="{% url 'appointments:service-delete' form.instance.pk %}" 
                               class="btn btn-outline-danger"
                               onclick="return confirm('Are you sure you want to delete this service? This action cannot be undone.');">
                                <i class="fas fa-trash me-2"></i>Delete
                            </a>
                            {% endif %}
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Duration validation
        const durationInput = document.getElementById('{{ form.duration_minutes.id_for_label }}');
        if (durationInput) {
            durationInput.addEventListener('change', function() {
                if (parseInt(this.value) < 5) {
                    this.setCustomValidity('Duration must be at least 5 minutes.');
                } else {
                    this.setCustomValidity('');
                }
            });
        }
    });
</script>
{% endblock %}